import React, { useState } from "react";
import { Card, Table, Input, Select, Button, Space, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import { UserOutlined, SearchOutlined } from "@ant-design/icons";
import Layout from "../../components/Layout";

interface PatientItem {
  id: string;
  name: string;
  gender: string;
  age: number;
  idNumber: string;
  tags: string[];
}

const mockPatients: PatientItem[] = [
  { id: "p1", name: "张三", gender: "男", age: 34, idNumber: "410101198708083611", tags: ["高血压"] },
  { id: "p2", name: "李四", gender: "女", age: 45, idNumber: "410101197611112222", tags: ["糖尿病", "冠心病"] },
  { id: "p3", name: "王五", gender: "男", age: 50, idNumber: "410101197311043333", tags: [] },
];

const columns: ColumnsType<PatientItem> = [
  {
    title: "姓名",
    dataIndex: "name",
    render: (val, record) => <Space><UserOutlined />{val}</Space>,
  },
  { title: "性别", dataIndex: "gender", width: 70 },
  { title: "年龄", dataIndex: "age", width: 70 },
  { title: "身份证号", dataIndex: "idNumber", width: 160 },
  { title: "疾病标签",
    dataIndex: "tags",
    render: tags => tags?.map((tag: string) => 
      <Tag key={tag} className="disease-tag" style={{ backgroundColor: '#007aff', color: 'white', marginRight: 6 }}>
        {tag}
      </Tag>,
    ),
  },
  { title: "操作",
    dataIndex: "id",
    render: (id) => 
      <Button 
        type="primary" 
        href={`/doctor/patient/${id}`}
        className="apple-button-small-secondary"
        size="small"
      >
        详情
      </Button>,
    width: 80
  },
];

const PatientList: React.FC = () => {
  const [search, setSearch] = useState("");
  const [gender, setGender] = useState<string | undefined>(undefined);
  // 分页
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const filtered = mockPatients.filter(p =>
    (!search || p.name.includes(search) || p.idNumber.includes(search)) &&
    (!gender || p.gender === gender)
  );

  return (
    <Layout title="患者管理">
      <div className="patient-list-container">
        <div className="page-header">
          <h1 className="page-title">患者管理</h1>
        </div>
        
        <Card className="apple-card search-card">
          <Space className="search-actions">
            <Input.Search 
              value={search} 
              onChange={e => setSearch(e.target.value)} 
              placeholder="输入姓名或身份证搜索" 
              allowClear 
              className="apple-input-search"
              prefix={<SearchOutlined className="search-icon" />}
            />
            <Select
              value={gender}
              onChange={setGender}
              allowClear
              placeholder="性别筛选"
              className="apple-select"
              style={{ minWidth: 100 }}
              options={['男', '女'].map(g => ({ label: g, value: g }))}
            />
          </Space>
        </Card>
        
        <Card className="apple-card patients-table-card">
          <Table
            columns={columns}
            rowKey="id"
            dataSource={filtered.slice((page - 1) * pageSize, page * pageSize)}
            pagination={{
              current: page,
              pageSize,
              total: filtered.length,
              showSizeChanger: true,
              onChange: (pg, size) => { setPage(pg); setPageSize(size || 10); },
              className: "apple-pagination"
            }}
            className="patients-table"
            rowClassName="patient-row"
          />
        </Card>
      </div>
    </Layout>
  );
};
export default PatientList;
